<template>
	<view class="page-home-search">
		<view class="search-box">
			<u-search :showAction="false" placeholder="请搜索照片名称、尺寸" v-model="keyWord" @change="onSearch"></u-search>
		</view>
		<u-list v-if="currentList && currentList.length" height="calc(100vh - 74px)" @scrolltolower="onReachBottom">
			<view class="classify-list">
				<view v-for="(item, index) in currentList" :key="index" @tap="toMakePhoto(item)">
					<view class="list-item flex-between-center">
						<view class="left">
							<image class="poster" src="/static/other/avator.png"></image>
						</view>
						<view class="center">
							<view class="center-top">
								<text class="title-content">{{item.name}}<!-- <text class="hot-tag">热门</text> --></text>
							</view>
							<!-- 自定义 -->
							<view v-if="item.width === 0" class="center-bottom">
								<text>自定义照片</text>
							</view>
							<view v-else class="center-bottom">
								<text class="center-bottom-item">{{item.widthPixel}}*{{item.heightPixel}}px</text>
								<view class="split-col-short"></view>
								<text class="center-bottom-item">{{item.width}}*{{item.height}}mm</text>
								<view class="split-col-short"></view>
								<text class="center-bottom-item">{{item.minSize}}-{{item.maxSize}}kb</text>
							</view>
						</view>
						<view class="right">
							<u-icon color="rgba(229, 229, 229, 1)" name="arrow-right"></u-icon>
						</view>
					</view>

				</view>
				<u-loadmore :status="status" />

			</view>

		</u-list>
		<view v-if="noData" class="no-search-result">
			<view class="flex-center">
				<text class="gray-text">尚未搜到结果，你可以</text>
				<view class="custom-button ml-10" @tap="toCustomPhoto">
					<u-button type="primary" shape="circle" text="自定义寸照"></u-button>
				</view>

			</view>
		</view>
		<!-- 热门搜索列表 -->
		<view v-if="currentList && !currentList.length" class="hot-search-wrap">
			<view class="hot-search-title">
				<image class="hot-icon" src="/static/other/hot-icon.png"></image>
				<text class="hot-text">热门搜索</text>
			</view>
			<view class="hot-search-list">
				<view class="hot-item" v-for="(item,index) in hotList" :key="index">
					<u-tag @click="onClickHotItem(item)" :text="item.keyword" bgColor="rgba(245, 245, 245)"
						color="rgba(56, 56, 56)" borderColor="rgba(245, 245, 245)" shape="circle"></u-tag>
				</view>

			</view>
		</view>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const currentList = ref(null);
	const hotList = ref([]);
	const status = ref('loadmore');
	const keyWord = ref('');
	const noData = ref(false);
	const pageNo = ref(0);

	const queryData = async (isLoadMore) => {
		console.log('keyWord', keyWord.value);
		try {
			status.value = 'loading';
			// 下一页
			pageNo.value = isLoadMore ? pageNo.value + 1 : 1;
			// 接口是分页的
			let res = await uni.$request('/api/busi/product/select/byname', {
				name: keyWord.value, //分类id
				pageNo: pageNo.value,
				pageSize: 10,
			});
			currentList.value = [...(isLoadMore ? currentList.value : []), ...res.data.productList];
			if(!currentList.value.length) noData.value = true;
			status.value = currentList.value.length === res.data.total ? 'nomore' : 'loadmore';
		} catch (e) {
			console.log(e);
			status.value = 'loadmore';
			uni.$u.toast('数据加载失败');
		}

	}
	
	const toMakePhoto = (item) => {
		console.log('toMakePhoto', item)
		uni.navigateTo({
			url: item.width === 0 ? '/pages/make-photo/custom-photo' :
				`/pages/make-photo/make-photo?id=${item.id}`
		})
	
	};

	const getHotList = async () => {
		let res = await uni.$request('/api/busi/hotSearch/select', {
			pageNo: 1,
			pageSize: 30,
		});
		hotList.value = res.data.hotSearchList;
	}

	onLoad(() => {
		queryData();
		getHotList();
	});
	const onSearch = () => {
		console.log('onSearch');
		queryData();
	};
	const toCustomPhoto = () => {
		uni.navigateTo({
			url: '/pages/make-photo/custom-photo'
		})

	};

	const onReachBottom = () => {
		console.log('出发触底');
		if(status.value === 'nomore') return;
		queryData(true);
	};

	const onClickHotItem = (item) => {
		keyWord.value = item.keyword;
	}
</script>

<style lang="less" scoped>
	.page-home-search {
		background: #fff;

		.search-box {
			padding: 40rpx 32rpx;
		}

		.hot-search-wrap {
			margin-top: 40rpx;
			padding: 0 32rpx 32rpx 32rpx;

			.hot-search-title {
				.hot-icon {
					width: 32rpx;
					height: 44rpx;
					margin-right: 20rpx;
					vertical-align: middle;
				}

				.hot-text {
					vertical-align: middle;
					font-size: 32rpx;
					font-weight: 700;
					line-height: 44rpx;
					color: rgba(56, 56, 56, 1);
				}
			}

			.hot-search-list {
				display: flex;
				flex-wrap: wrap;
				gap: 24rpx;
				padding: 40rpx 0;

				.hot-item {}
			}

		}

		.classify-list {
			padding: 20rpx 32rpx 20rpx 32rpx;
			justify-content: flex-start;

			.list-item {
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.02);
				padding: 32rpx;

				.left {
					width: 96rpx;
					height: 96rpx;
					margin-right: 32rpx;

					.poster {
						width: 96rpx;
						height: 96rpx;
						border-radius: 8rpx;
					}
				}

				.center {
					width: 100%;
					height: 96rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.center-top {
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0;
					line-height: 42rpx;
					color: rgba(0, 0, 0, 1);

					.title-content {
						position: relative;
					}

					.hot-tag {
						width: 80rpx;
						height: 30rpx;
						;
						border-radius: 200rpx;
						background: linear-gradient(90deg, rgba(230, 69, 69, 1) 0%, rgba(230, 106, 69, 1) 100%), rgba(212, 48, 48, 1);
						padding: 0px 20rpx;
						width: 20px;
						height: 15px;
						opacity: 1;
						display: flex;

						/** 文本1 */
						font-size: 20rpx;
						font-weight: 700;
						letter-spacing: 0;
						line-height: 30rpx;
						color: rgba(255, 255, 255, 1);
						position: absolute;
						left: calc(100% + 28rpx);
						top: -10rpx;
						// vertical-align: top;

					}
				}

				.center-bottom {
					width: 100%;
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0;
					line-height: 36rpx;
					color: rgba(166, 166, 166, 1);

					.center-bottom-item {
						width: 150rpx;
						text-align: center;
						display: inline-block;
					}
				}
			}


		}
	}
</style>